<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>提交表单</h1>
<form action="${pageContext.request.contextPath }/testFm" method="post" id="form1">
form
用户名:<input type="text" name="userName"><br>
用户密码:<input type="text" name="userPwd"><br>
用户角色:<input type="text" name="role.roleName"><br>
<input type="submit" value="提交">
</form>

<form action="${pageContext.request.contextPath }/testFmList" method="post" id="form2">
用户1<br>
用户名:<input type="text" name="users[0].userName"><br>
用户密码:<input type="text" name="users[0].userPwd"><br>
用户角色:<input type="text" name="users[0].role.roleName"><br><br>
用户2<br>
用户名:<input type="text" name="users[1].userName"><br>
用户密码:<input type="text" name="users[1].userPwd"><br>
用户角色:<input type="text" name="users[1].role.roleName"><br><br>
用户3<br>
用户名:<input type="text" name="users[2].userName"><br>
用户密码:<input type="text" name="users[2].userPwd"><br>
用户角色:<input type="text" name="users[2].role.roleName"><br>

<input type="submit" value="提交">
</form>
<h1>AJAX提交JSON对象</h1>
<form action="${pageContext.request.contextPath }/testFmAjax" method="post" id="form3">
<textarea rows="10" cols="60" id="jsonObj1">
{
	"userName": "admin",
	"userPwd": "123",
	"role": {
		"roleName": "系统管理员"
	}
}
</textarea>
<input type="submit" value="提交">
</form>

<form action="${pageContext.request.contextPath }/testFmListAjax" method="post" id="form4">
<textarea rows="25" cols="60" id="jsonObj2">
{
	"users": [{
			"userName": "admin1",
			"userPwd": "123",
			"role": {
				"roleName": "系统管理员1"
			}
		},
		{
			"userName": "admin2",
			"userPwd": "123",
			"role": {
				"roleName": "系统管理员2"
			}
		},
		{
			"userName": "admin3",
			"userPwd": "123",
			"role": {
				"roleName": "系统管理员3"
			}
		}
	]
}			
</textarea>

<input type="submit" value="提交">
</form>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-serializeJson.js"></script>
<script type="text/javascript">
$(function(){
	$("#form1").submit(function(){
		var _this = $(this);
		$.ajax({  
		    type: "POST",  
		    url: _this.attr("action"),  
		    data: _this.serialize(),//将对象序列化成JSON字符串  
		    dataType:"json",  
		    success: function(data){  
		    },  
		    error: function(res){  
		    }  
		});  
		return false;
	})
	$("#form2").submit(function(){
		var _this = $(this);
		var jsonObj = _this.serializeJson();
		console.log(jsonObj);
		$.ajax({  
		    type: "POST",  
		    url: '${pageContext.request.contextPath }/testFmListAjax',  
		    data: JSON.stringify(jsonObj),  
		    dataType:"json",  
		    contentType : 'application/json;charset=utf-8',
		    success: function(data){  
		    },  
		    error: function(res){  
		    }  
		});  
		return false;
	})
	
	$("#form4").submit(function(){
		var _this = $(this);
		var jsonObj = $("#jsonObj2").val();
		$.ajax({  
		    type: "POST",  
		    url: _this.attr("action"),  
		    data: jsonObj,//JSON.stringify(_this.serializeArray()),//将对象序列化成JSON字符串  
		    dataType:"json",  
		    contentType : 'application/json;charset=utf-8',
		    success: function(data){  
		    },  
		    error: function(res){  
		    }  
		});  
		return false;
	})
})

</script>
</body>
</html>